<template>
  <div>
    <el-card>
      <div>
        <el-row @click="serchShow = !serchShow"
                style="height: 45px;border: 1px solid #dedede;display: flex; justify-content: space-between;">
          <span style="line-height: 45px;text-indent: 2em;">查询条件</span>
          <span style="line-height: 45px;margin-right: 10px" v-if="!serchShow">展开更多条件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon><ArrowLeft/></el-icon></span>
          <span style="line-height: 45px;margin-right: 10px" v-if="serchShow">收回&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon><ArrowUp/></el-icon></span>
        </el-row>
        <el-form class="search-form" style="margin-top: 20px">
          <el-form-item label-width="100px" label="用户账号:" size="default">
            <el-input v-model="userId" placeholder="请输入用户账号" clearable></el-input>
          </el-form-item>
          <el-form-item label-width="100px"  label="用户昵称:" size="default">
            <el-input v-model="userName" placeholder="请输入用户昵称" clearable></el-input>
          </el-form-item>
          <el-form-item label-width="100px"  label="姓名:" size="default">
            <el-input v-model="realName" placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label-width="100px"  label="性别:" size="default">
            <el-select style="width: 100%" v-model="gender" placeholder="请选择性别" clearable>
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="0"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label-width="100px" v-show="serchShow" label="用户简介:" size="default">
            <el-input v-model="email" placeholder="请输入用户简介" clearable></el-input>
          </el-form-item>
          <el-form-item label-width="100px" v-show="serchShow" label="手机号:" size="default">
            <el-input v-model="phone" placeholder="请输入手机号" clearable></el-input>
          </el-form-item>
          <el-form-item label-width="100px" v-show="serchShow" label="用户简介:" size="default">
            <el-input v-model="userProfile" placeholder="请输入用户简介" clearable></el-input>
          </el-form-item>
          <el-form-item label-width="100px" v-show="serchShow" label="用户积分:" size="default">
            <el-input v-model="userPoint" placeholder="请输入用户积分" clearable></el-input>
          </el-form-item>
          <el-form-item label-width="100px" v-show="serchShow"  label="会员级别:" size="default">
            <el-select style="width: 100%" v-model="userLevel" placeholder="请选择会员级别" clearable>
              <el-option label="普通会员" value="1"></el-option>
              <el-option label="青铜" value="2"></el-option>
              <el-option label="白银" value="3"></el-option>
              <el-option label="黄金" value="4"></el-option>
              <el-option label="钻石" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="100px"  v-show="serchShow"   label="状态:" size="default">
            <el-select style="width: 100%" v-model="userStats" placeholder="请选择状态" clearable>
              <el-option label="正常" value="1"></el-option>
              <el-option label="禁止" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="all-search">
          <el-button type="primary" size="mini" class="btn-background-color-search" @click="queryBtn">
            查询
          </el-button>
          <el-button type="primary" size="mini" class="btn-background-color-reset" @click="reset">重置
          </el-button>
        </div>
        <div class="all-add">
          <el-button round type="success" size="mini" class="btn-background-color-add" @click="addUserDialog">
            新增
          </el-button>
        </div>
      </div>
    </el-card>
    <el-table :row-style="{height: '30px'}" :data="dataList"
              :cell-style="{ textAlign: 'center' }"
              :header-cell-style="{textAlign: 'center',background:'#d1c9c9'}" border
              style="width: 100%" size="small" max-height="400">
      <el-table-column fixed prop="userId" label="用户ID" min-width="80" show-overflow-tooltip="true"/>
      <el-table-column prop="userName" label="用户昵称" min-width="80" show-overflow-tooltip="true"/>
      <el-table-column prop="realName" label="姓名" min-width="80" show-overflow-tooltip="true"/>
      <el-table-column prop="gender" label="性别" min-width="40" show-overflow-tooltip="true">
        <template #default="scope">
          <el-tooltip effect="dark" :content="'男'" placement="top">
            <el-icon color="blue"  v-if="scope.row.gender == 1 " :size="15">
              <Male/>
            </el-icon>
          </el-tooltip>
          <el-tooltip effect="dark" :content="'女'" placement="top">
            <el-icon color="red"  v-if="scope.row.gender != 1 " :size="15">
              <Female/>
            </el-icon>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="identityCardType" label="证件类型" min-width="80" show-overflow-tooltip="true">
        <template #default="scope">
          <div v-if="scope.row.identityCardType == 1 " style="display: flex; align-items: center">
            <el-icon color="#f50263"><Tickets /></el-icon>
            <span style="margin-left: 10px">身份证</span>
          </div>
          <div v-if="scope.row.identityCardType == 2 " style="display: flex; align-items: center">
            <el-icon color="#0726f3"><Memo /></el-icon>
            <span style="margin-left: 10px">军官证</span>
          </div>
          <div v-if="scope.row.identityCardType == 3 " style="display: flex; align-items: center">
            <el-icon color="#0df346"><Document /></el-icon>
            <span style="margin-left: 10px">护照</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="邮箱" min-width="100" show-overflow-tooltip="true"/>
      <el-table-column prop="phone" label="手机号" min-width="100" show-overflow-tooltip="true"/>
      <el-table-column prop="userAvatar" label="用户头像" min-width="70" show-overflow-tooltip="true">
        <template #default="scope">
          <div v-if="scope.row.userAvatar == 'src/assets/file/user/默认.jpg' " style="display: flex; align-items: center">
            <el-icon color="#76777e"><CameraFilled /></el-icon>
            <span style="margin-left: 10px">暂未上传</span>
          </div>
          <div v-if="scope.row.userAvatar != 'src/assets/file/user/默认.jpg' " style="display: flex; align-items: center">
            <el-icon  color="#0726f3"><PictureFilled /></el-icon >
            <span style="margin-left: 10px">已上传</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="userPoint" label="用户积分" min-width="50" show-overflow-tooltip="true"/>
      <el-table-column prop="userLevel" label="会员级别" min-width="70" show-overflow-tooltip="true">
        <template #default="scope">
          <div v-if="scope.row.userLevel == 1 " style="display: flex; align-items: center">
            <el-icon color="#b1b0b1"><Tickets /></el-icon>
            <span style="margin-left: 10px">普通会员</span>
          </div>
          <div v-if="scope.row.userLevel == 2 " style="display: flex; align-items: center">
            <el-icon color="#af90af"><Memo /></el-icon>
            <span style="margin-left: 10px">青铜</span>
          </div>
          <div v-if="scope.row.userLevel == 3 " style="display: flex; align-items: center">
            <el-icon color="#ad69ad"><Document /></el-icon>
            <span style="margin-left: 10px">白银</span>
          </div>
          <div v-if="scope.row.userLevel == 4 " style="display: flex; align-items: center">
            <el-icon color="#ac42ac"><Document /></el-icon>
            <span style="margin-left: 10px">黄金</span>
          </div>
          <div v-if="scope.row.userLevel == 5 " style="display: flex; align-items: center">
            <el-icon color="#ac08ac"><Document /></el-icon>
            <span style="margin-left: 10px">钻石</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="userStats" label="状态" min-width="50" show-overflow-tooltip="true">
        <template #default="scope">
          <el-tooltip effect="dark" :content="'正常'" placement="top">
            <el-icon color="#68f703"  v-if="scope.row.userStats == 1 " :size="15">
              <SuccessFilled/>
            </el-icon>
          </el-tooltip>
          <el-tooltip effect="dark" :content="'已封禁'" placement="top">
            <el-icon color="#f87103"  v-if="scope.row.userStats != 1 " :size="15">
              <WarningFilled/>
            </el-icon>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="注册时间" min-width="100" show-overflow-tooltip="true"/>
      <el-table-column prop="updateTime" label="更新时间" min-width="100" show-overflow-tooltip="true"/>
      <el-table-column fixed="right" label="操作" width="140">
        <template #default="scope">
          <el-button  link type="primary" class="btn-background-color-xiangqing" size="small"
                      @click.stop="userDetails(scope.row)">详情
          </el-button>
          <el-button v-if="scope.row.userStats == 1"  link type="primary" class="btn-background-color-blue" size="small"
                     @click.stop="banDialog(scope.row)">封禁
          </el-button>
          <el-button v-if="scope.row.userStats != 1"  link type="primary" class="btn-background-color-green" size="small"
                     @click.stop="banDialog(scope.row)">解禁
          </el-button>
          <el-button  link type="primary" class="btn-background-color-red" size="small"
                     @click.stop="removeDialog(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-border">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          v-model:current-page="current"
          v-model:page-size="pageSize"
          v-model:total="total"
          :page-sizes="[5, 10, 20, 30,50,100]"
          small
          background
          layout="->,total, sizes, prev, pager, next, jumper"
      />
    </div>
  </div>
  <el-dialog   v-model="DeleteByIdIsShowDialog" title="Warning" width="30%" align-center draggable destroy-on-close>
    <template #header>
      <div>你确认删除用户ID为{{UserHandleData.userId}}的用户吗</div>
    </template>
    <template #footer>
      <span>
        <el-button color="red" type="primary" @click="DeleteByIdsubmit(UserHandleData.id)">确认</el-button>
        <el-button @click="Deleteclose">取消</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog   v-model="BanIsShowDialog" title="Warning" width="30%" align-center draggable destroy-on-close>
    <template #header>
      <div v-if="UserHandleData.userStats == 1">你确认封禁用户ID为{{UserHandleData.userId}}的用户吗</div>
      <div v-if="UserHandleData.userStats != 1">你确认解封用户ID为{{UserHandleData.userId}}的用户吗</div>
    </template>
    <template #footer>
      <span>
        <el-button color="red" type="primary" @click="Bansubmit(UserHandleData)">确认</el-button>
        <el-button @click="Banclose">取消</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog   v-model="AddIsShowDialog" title="Warning" width="30%" align-center draggable destroy-on-close>
    <template #header>
     <h1>新增用户</h1>
    </template>
    <el-form :model="registerForm" :rules="rules" ref="registerFormRef">
      <el-form-item label="账号" prop="userId">
        <el-input
            v-model="registerForm.userId"
            clearable
            placeholder="请您输入要添加的呢称"
            size="large"
        ></el-input>
      </el-form-item>
      <el-form-item label="呢称" prop="userName">
        <el-input
            v-model="registerForm.userName"
            clearable
            placeholder="请您输入要添加的昵称"
            size="large"
        ></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-radio-group v-model="registerForm.userType">
          <el-radio label="user">添加用户</el-radio>
          <el-radio label="merchant">添加商家</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button color="red" type="primary" @click="Addsubmit">确认</el-button>
        <el-button @click="Addclose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="Users">
import {ref, onMounted, reactive} from 'vue';
import {useRouter} from "vue-router";
import {reqDeleteUser, reqUserList, reqUpdateUser, reqAddUser} from "@/api/user";
import type {
  ResponseData
} from '@/api/user/type'
import {ElMessage, ElNotification} from "element-plus";
const router = useRouter();
let userId =  ref();
let userName =  ref();
let realName =  ref();
let gender =  ref();
let email =  ref();
let phone =  ref();
let userProfile =  ref();
let userPoint =  ref();
let userLevel =  ref();
let userType =  ref();
let userStats =  ref();
const dataList = ref([]);
const serchShow = ref();
let current = ref(1);
let pageSize= ref(10);
let total= ref(0);
const DeleteByIdIsShowDialog = ref(false);
const BanIsShowDialog = ref(false);
const UserHandleData = ref();
const AddIsShowDialog = ref(false);
const registerForm = reactive({
  userId: "",
  userName: "",
  userType:"user"
});
const registerFormRef = ref(null);
const rules = {
  userId: [
    {required: true, message: "请输入账号", trigger: "blur"},
    {min: 4, message: "账号长度不能少于4位", trigger: "blur"}
  ]
};
/*查询按钮*/
const queryBtn = ( async () => {

  let userQueryRequest = {
    userId : userId.value ? userId.value : null,
    userId : userId.value ? userId.value : null,
    userName : userName.value ? userName.value : null,
    realName : realName.value ? realName.value : null,
    gender : gender.value ? Number(gender.value) : null,
    email : email.value ? email.value : null,
    phone : phone.value ? phone.value : null,
    userProfile : userProfile.value ? userPoint.value : null,
    userPoint : userPoint.value ? Number(userPoint.value) : null,
    userLevel : userLevel.value ? Number(userLevel.value) : null,
    userType : userType.value ? userType.value : null,
    userStats :  userStats.value ? Number(userStats.value) : null,
    current : current.value ? Number(current.value) : null,
    pageSize : pageSize.value ? Number(pageSize.value) : null
  }
    let data ;
   let res : ResponseData=  await reqUserList(userQueryRequest);
    data= res.data;
    if(res.data.records){
      dataList.value = data.records;
      total.value = Number(data.total);
      current.value = Number(data.current);
      pageSize.value = Number(data.size);
    }else{
      ElMessage.error("请求数据为空...");
    }
})
const reset = (() => {
  userId.value =  null;
  userName.value =  null;
  realName.value =  null;
  gender.value = null;
  email.value =  null;
  phone.value =  null;
  userProfile.value =  null;
  userPoint.value =  null;
  userLevel.value =  null;
  userType.value =  null;
  userStats.value =  null;
})
const addUserDialog = (()=> {
  registerForm.userId = "" ;
  registerForm.userName = "" ;
  AddIsShowDialog.value = true;
})
const handleSizeChange = ((val: any) => {
  pageSize.value = val;
  queryBtn();
})
const handleCurrentChange = ((val: any) => {
  current.value = val;
  queryBtn();
})
const removeDialog = (item: any) => {
  UserHandleData.value =item;
  DeleteByIdIsShowDialog.value = true;
}
const DeleteByIdsubmit = ( async (id : number) => {
  let res = await reqDeleteUser({id:id});
  if(res.data == true){
    ElMessage.success("删除成功");
    queryBtn();
  }
  DeleteByIdIsShowDialog.value = false;
})
const Deleteclose = () => {
  DeleteByIdIsShowDialog.value = false;
}
const banDialog = (item: any) => {
  UserHandleData.value =item;
  BanIsShowDialog.value = true;
}
const Bansubmit = ( async (item : any) => {
  let message;
  let userStats;
  if(item.userStats == 1){
    message = "封禁成功";
    userStats = 0 ;
  }else {
    message = "解封成功";
    userStats = 1 ;
  }
  let res = await reqUpdateUser({id:item.id,userStats:userStats});
  if(res.data == true){
    ElMessage.success(message);
    queryBtn();
  }
  BanIsShowDialog.value = false;
})
const  Addsubmit = (() => {
  registerFormRef.value.validate( async (valid: Boolean) => {
    if (valid){
      let res : ResponseData= await reqAddUser(registerForm);
      if (res.code === 0) {
        AddIsShowDialog.value = false;
        ElMessage.success("新增成功");
        queryBtn();
      } else {
        //提示信息添加失败
        ElMessage.error(res.message);
      }
    }
  });
})
const Banclose = () => {
  BanIsShowDialog.value = false;
}
const Addclose = () => {
  AddIsShowDialog.value = false;
}
const userDetails = (item : any) => {
  router.push({
    name: 'usersDetails',
    query: {
      row: item.id,
      flag: 'admin',
    }
  });
}
onMounted(() => {
  queryBtn();
})

</script>


<style lang="scss" scoped>
.search-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 90%;
}
.search-form .el-form-item {
  width: calc(100% / 4);
  padding-right: 10px;
  box-sizing: border-box;
}
.all-search {
  padding-top: 5px;
  display: flex;
  justify-content: flex-end;
}
.btn-background-color-search {
  background-color: #00a6ff;
  color: white;
}
.btn-background-color-reset {
  background-color: #29958d;
  color: white;
}
.all-add {
  padding-top: 5px;
  display: flex;
}
.btn-background-color-add {
  background-color: #148f34;
  color: white;
}
.pagination-border {
  padding-top: 8px;
  padding-right: 20px;
  height: 40px;
  width: 100%;
  border: 1px solid var(--el-border-color);
  border-radius: 0;
}
.btn-background-color-blue {
  background-color: #1f44cc;
  color: white;
  height: 22px;
  float: left;
}
.btn-background-color-green {
  background-color: #4a622d;
  color: white;
  height: 22px;
  float: left;
}
.btn-background-color-red {
  background-color: #f80317;
  color: white;
  height: 22px;
  float: left;
}
.btn-background-color-xiangqing {
  background-color: #afa681;
  color: white;
  height: 22px;
  float: left;
}
</style>
